<template>
    <div class="main el-box-init el-bkgd-white el-pd-20">
        <!-- 操作按钮 -->
        <el-row class="table-btn el-pd-b-20">
            <el-button type="primary" v-if="isAuth('SYS_ROLE_ADD')" @click="onAddOrUpdate()">
                <el-icon class="table-icon"><plus /></el-icon>
                新增
            </el-button>
        </el-row>

        <!-- 表格列表 -->
        <el-table v-loading="loading" :data="list" stripe border ref="tableRef">
            <el-table-column prop="name" label="角色名"></el-table-column>

            <el-table-column prop="status" label="状态" :width="$minActionWidth">
                <template #default="{ row }">
                    <el-tag :type="row.status == 1 ? '' : 'danger'">
                        {{ row.status == 1 ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="remarks" label="备注"></el-table-column>

            <el-table-column prop="created_at" label="创建时间">
                <template #default="{ row }">
                    {{ formatTime(row.created_at) }}
                </template>
            </el-table-column>

            <el-table-column prop="updated_at" label="更新时间">
                <template #default="{ row }">
                    {{ formatTime(row.updated_at) }}
                </template>
            </el-table-column>

            <el-table-column label="操作" :width="$maxActionWidth" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        v-if="isAuth('SYS_ROLE_UPDATE')"
                        @click="onAddOrUpdate(row.id)"
                    >
                        <el-icon class="table-icon"><edit /></el-icon>
                        编辑
                    </el-button>
                    <el-button v-if="isAuth('SYS_ROLE_AUTH')" @click="onAuth(row.id)">
                        授权
                    </el-button>
                    <el-button
                        type="danger"
                        v-if="row.id != 1 && isAuth('SYS_ROLE_DEL')"
                        @click="onDel(row.id)"
                    >
                        <el-icon class="table-icon"><delete /></el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格分页 -->
        <el-pagination
            :currentPage="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            background
            :layout="layout"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />

        <!-- 新增、编辑 -->
        <dialog-add-or-update ref="addOrUpdate"></dialog-add-or-update>
        <!-- 授权组件 -->
        <auth-components ref="auth"></auth-components>
    </div>
</template>

<script>
import { getCurrentInstance, ref, reactive, toRefs } from 'vue';
import { adminRole as Api } from 'api';
import DialogAddOrUpdate from './add-or-update.vue';
import AuthComponents from './auth.vue';

export default {
    components: {
        DialogAddOrUpdate,
        AuthComponents
    },
    setup() {
        const { proxy } = getCurrentInstance();

        let table = reactive({
            loading: false,
            rowId: 0,
            list: [],
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });

        // 获取列表
        const getList = async () => {
            const { code, data } = await proxy.$http.get(Api.getList, {
                params: {
                    page: table.currentPage, //查询第几页
                    per_page: table.pageSize //每页多少条数据
                }
            });

            if (code === 200) {
                table.list = data.list;
                table.total = data.total;
                // 关闭加载提示
                table.loading = false;
            }
        };
        // 删除当前项
        const onDel = async (id) => {
            const confirm = await proxy.$msgBox.confirm({
                cancel: true
            });

            if (confirm) {
                const { code, msg, data } = await proxy.$http.delete(Api.del, {
                    data: { id }
                });

                if (code === 200) {
                    proxy.$msg.success(msg);
                    getList();
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }
            }
        };

        // 新增、编辑
        const onAddOrUpdate = (id) => {
            proxy.$refs.addOrUpdate.id = id;
            proxy.$refs.addOrUpdate.visible = true; // 弹窗开关
        };
        // 权限
        const onAuth = (id) => {
            proxy.$refs.auth.id = id;
            proxy.$refs.auth.visible = true; // 弹窗开关
        };

        // 每页多少条
        const handleSizeChange = (val) => {
            table.loading = true;
            table.pageSize = val;
            getList();
        };
        // 当前页
        const handleCurrentChange = (val) => {
            table.loading = true;
            table.pageSize = val;
            getList();
        };

        const formatTime = (value) => {
            return proxy.$formatTime(value);
        };

        getList();

        return {
            ...toRefs(table),
            onDel,
            onAddOrUpdate,
            onAuth,
            handleSizeChange,
            handleCurrentChange,
            formatTime,
            getList
        };
    }
};
</script>